<template>
  <div class="login-page">
    <div class="login-left">
      <div class="login-bg"></div>
    </div>
    <div class="login-right">
      <div class="login-box">
        <div class="login-logo"><img src="../assets/img/login_logo.png" alt=""></div>
        <div class="login-xian"><span><i class="login-ileft"></i>欢迎登录<i class="login-iright"></i></span></div>
        <div class="login-title">催收后台管理系统</div>
        <div class="login-wrapper">
          <div class="input-box">
            <i class="iconfont icon-zhanghu iconfonts" :class="{focus:icon.username}"></i>
            <input type="text" class="input" v-model.trim="account.username" placeholder="账户"
                   @focus="icon.username=true;"
                   @blur="icon.username=false;"
                   @click="inputborderError=false;errorTip=''"
                   :class="{'inputBorder':icon.username, 'inputBordererror':inputborderError}"/>
            <i class="iconfont icon-shanchu" v-if="account.username != '' "
               @click="account.username = '';inputborderError=false;errorTip=''"></i>
          </div>
          <div class="input-box">
            <i class="iconfont icon-mima iconfonts" :class="{focus:icon.userpassword}"></i>
            <input type="password" class="input" v-model.trim="account.userpassword" placeholder="密码"
                   @focus="icon.userpassword=true;"
                   @blur="icon.userpassword=false;"
                   @click="inputborderError=false;errorTip=''"
                   @keyup.enter="LoginButton"
                   :class="{'inputBorder':icon.userpassword,'inputBordererror':inputborderError }">
            <i class="iconfont icon-shanchu" v-if="account.userpassword != '' "
               @click="account.userpassword = '';inputborderError = false;errorTip = ''"></i>
          </div>
          <div class="input-checked">
            <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
          </div>
          <div class="input-error">{{ errorTip }}</div>
          <div class="input-button" v-loading="loading">
            <button class="button"
                    :class="{'buttonbackground':( account.username && account.userpassword ) }"
                    :disabled="( account.username=='' ||  account.userpassword=='' )"
                    @click="LoginButton">登录
            </button>
          </div>
        </div>
        <!-- <div class="login-official "><a href="http://www.qurongjinfu.com/">@初租</a></div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import {Base64} from 'js-base64';
  import md5 from 'md5'

  export default {
    data() {
      return {
        account: {
          username: '',
          userpassword: '',
        },
        icon: {
          username: false,
          userpassword: false,
        },
        inputborderError: false,
        checked: true,
        errorTip: '',
        loading: false,
      }
    },
    methods: {
      LoginButton() {
        let that = this;
        let username = that.account.username.trim();

        let password = that.account.userpassword.trim();
        let user = username + ':' + password;
        // let authorization = 'Basic ' + Base64.encode(user);

        that.ajaxJson({
          url: '/auth/login',
          data: {
            loginName: username,
            password: md5(password),
          },
          success: function (data) {
            console.log(data.data+'----login')
            if (data.code == '0') {
              that.$router.push({name: 'index'})
              if (that.checked) {
                that.localData('set', 'login_auth', Base64.encode(user));
              } else {
                that.localData('clean', 'login_auth')
              }
              that.localData('set', 'login_user', data.data);
              
            } else {
              that.errorTip = data.message;
              that.inputborderError = true;
            }
          }
        })
      },
    },
    created() {
      let that = this;
      let user_auth = that.localData('get', 'login_auth');
      if (user_auth) {
        that.account.username = Base64.decode(user_auth).split(":")[0];
        that.account.userpassword = Base64.decode(user_auth).split(":")[1];
      }
    }
  }
</script>
<style lang="less">
  .login-page {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .login-left {
      flex: 1;
      .login-bg {
        width: 100%;
        height: 100%;
        background: url("../assets/img/login_pic.png") no-repeat center center;
        background-size:cover;
        img {
          display: block;
          width: 100%;
        }
      }
    }
    .login-right {
      position: relative;
      width: 480px;
      background: #ffffff;
      .login-box {
        position: absolute;
        top: 50%;
        left: 70px;
        margin-top: -289px;
        width: 340px;
        height: auto;
        .login-logo {
          width: 150px;
          height: 150px;
          margin: 0 auto 30px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .login-xian {
          width: 100%;
          span {
            display: block;
            font-size: 22px;
            color: #333333;
            letter-spacing: 0;
            text-align: center;
            line-height: 30px;
            margin-bottom: 10px;
            i {
              display: block;
              width: 80px;
              height: 1px;
              background: #dddddd;
            }
            .login-ileft {
              float: left;
              margin-top: 15px;
            }
            .login-iright {
              float: right;
              margin-top: 15px;
            }
          }
        }
        .login-title {
          font-size: 14px;
          color: #999999;
          letter-spacing: 0;
          line-height: 20px;
          text-align: center;
          margin-bottom: 50px;
        }
        .login-wrapper {
          .input-box {
            width: 340px;
            height: 44px;
            margin-bottom: 20px;
            position: relative;
            .iconfonts {
              position: absolute;
              top: 10px;
              left: 10px;
              width: 30px;
              font-size: 22px;
              color: #ccc;
            }
            .input {
              width: 292px;
              padding-left: 48px;
              border: 1px solid #DDDDDD;
              height: 44px;
              font-size: 14px;
              color: #999999;
              outline: none;
            }
            .focus {
              color: #FF7500;
            }
            .inputBorder {
              border: 1px solid #69B6F2;
            }
            .inputBordererror {
              border: 1px solid #FF0000;
            }
            .icon-shanchu {
              position: absolute;
              top: 12px;
              right: 10px;
              width: 20px;
              font-size: 18px;
              color: #ccc;
              right: 10px !important;
            }
          }
          .input-checked {
            width: 100%;
            height: 22px;
          }
          .input-error {
            margin: 15px 0;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: #FF0000;
          }
          .input-button {
            width: 100%;
            .button {
              width: 100%;
              height: 46px;
              outline: none;
              border: none;
              background-image: linear-gradient(-90deg, #CCCCCC 0%, #DDDDDD 100%);
              font-size: 20px;
              color: #FFFFFF;
              letter-spacing: 10px;
              line-height: 46px;
              border-radius: 4px;
              cursor: pointer;
              transition: all 1s;
            }
            .button:hover {
              background-image: linear-gradient(-90deg, #B7B7B7 0%, #C6C6C6 100%);
              box-shadow: 0 5px 20px 0 rgba(207, 207, 207, 0.50);
            }
            .buttonbackground {
              background-image: linear-gradient(-90deg, #FF7500 0%, #FFA233 100%);
            }
            .button.buttonbackground:hover {
              background-image: linear-gradient(-90deg, #FF7500 0%, #FFA233 100%);
              box-shadow: 0 5px 20px 0 rgba(35, 139, 254, 0.30);
            }
          }
        }
        .login-official {
          margin: 60px 0 0;
          text-align: center;
          a {
            color: #69B6F2;
            font-size: 12px;
            letter-spacing: 0;
          }
        }
      }

    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#666;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color:#333;
      border-color:#333;
    }
    .el-checkbox__inner:hover{
      border-color:#333;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner{
      border-color:#333;
    }

  }
</style>
